@charset "utf-8";
body:before {
 content: "";
 position: fixed;
 top: -10px;
 left: 0;
 width: 100%;
 height: 10px;
 z-index: 100;
 box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
.buttons:before, .buttons:after {
	content: "\*020";
	display: block;
	height: 0;
	visibility: hidden
}

.buttons:after {
	clear: both;
}

.buttons {
	zoom: 1;
}
button:focus, #button:focus, .button:focus {
outline:none;
}
/*--------------------------------------------------------------------*/
.p_note {
	position: fixed;
	background: rgba(0,0,0,0);
	height: 100%;
	width: 100%;
	z-index: 106;
	left: 0;
	top: 0;
 /* -webkit-filter: blur(1px);*/
/* background-image: url(images/tv.png);*/
}

.m_note { 
 /* overflow:auto;*/
	/*resize:both;*/
	position: relative;
	width: 650px;
	height: 450px;
 border-radius: 7px;
 
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.8), 
             inset 1px 1px 3px rgba(255, 255, 255, 1), 
             inset -1px -1px 3px rgba(255, 255, 255, 1);
 background-image: url(images/g_stile.png); 
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background-color: rgba(0,0,0,0);
	font-size: 16px;
	color: #666;
	font-weight: normal;
	text-shadow: 0 2px 0 rgba(255,255,255,1);    
        
	margin: auto;
	margin-top: 40px;
	display: block;

}
/*box-shadow: -7px 15px 10px rgba(0, 0, 0, 0.3);*/
/*box-shadow: 0 15px 10px rgba(0, 0, 0, 0.3);*/


.shadow:before, .shadow:after {
 /*background:rgba(255,0,0,.3);*/
	z-index: -3;
	position: absolute;
	content: "";
	bottom: 10px;
	left: 9px;
	width: 300px;
 top: 90%;
	border-radius: 7px;
	box-shadow: -7px 15px 10px rgba(0, 0, 0, 0.3);
	-webkit-transform: rotate(-3deg);
}

.shadow:after {
	top: 90%;
 bottom: 8px;
	box-shadow: 0 15px 10px rgba(0, 0, 0, 0.3);
	-webkit-transform: rotate(2deg);
	left: auto;
	right: 4px;
}

.top_note {
	width: auto;
	height: 55px;
	border-bottom: 2px groove white;
	margin-left: 30px;
	margin-right: 30px;
 line-height: 50px;
 font-family: "Segoe Print", Verdana, Geneva, sans-serif;
 font-size: 16px;
}

.logo{
 float:left;
 margin-right: 20px;
 position:relative;
 top: 3px;
 width:48px;
 height: 48px;
 background-image: url(images/voice.png);
 border-radius: 7px;
	/*box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8),  1px 1px 3px rgba(255, 255, 255, 1), -1px -1px 3px rgba(255, 255, 255, 1);*/
}
.scr {
 float:left;
 position:relative;
 margin-left: 15px;
 
}

.body_note {
	width: auto;
	height: 350px;
	overflow: auto;
	margin-left: 50px;
}

.bottom_note {
	width: auto;
	height: 50px;
 line-height: 50px;
 font-family: "Segoe Print", Verdana, Geneva, sans-serif;
 font-size: 16px;
	margin-left: 30px;
	margin-right: 30px;
	border-top: 2px groove white;
}

                                         /*---------------------------------m_set-----------------------------*/
.m_set {
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
             inset -1px -1px 100px rgba(0,0,0,.1);
             
 position: relative;
 width: 650px;
 height: 500px;
 border-radius: 12px 12px 0 0;
 margin: auto;
 margin-top: 40px;
 display: block;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 
 background-color: rgba(255,255,255,1);   /*---color first page----*/
/* background-image: url(images/9stile.jpg);*/
 background-image: 
 linear-gradient(rgba(246,171,202,1) 1px, transparent 1px),
 linear-gradient(rgba(246,171,202,1) 1px, transparent 1px); 
  background-size: 1px 1px, 1px 1px;
  background-repeat: repeat-y, repeat-y;
  background-position: 42px 0, 44px 0;
 background-attachment:scroll;
 font-size: 16px;
 color: #666;
 font-weight: normal;
 text-shadow: 0 2px 0 rgba(255,255,255,1);
 }
 
.m_set:before, .m_set:after {
  content: '';
  position: absolute;
  z-index: -1;
 background-color: rgba(255,255,255,.8);   /*----color pages---*/
 background-image: 
 linear-gradient(#f6abca 1px, transparent 1px), 
 linear-gradient(#f6abca 1px, transparent 1px);
 background-size: 1px 1px, 1px 1px;
 background-repeat: repeat-y, repeat-y;
 background-position: 42px 0, 44px 0;
  bottom: -3px;
  left: 3px;
  right: 3px;
  box-shadow:0 1px 3px rgba(0, 0, 0, 0.3),
             inset -1px -1px 100px rgba(0,0,0,.1) ;
             
  border-radius: 0px 0px 3px 3px;
  height: 200px;
  -webkit-transform: rotate(-0.2deg);
}
.m_set:after {
 z-index: -2;
  bottom: -6px;
  left: 6px;
  right: 6px;
  -webkit-transform: rotate(-0.5deg);
 }
                                /*---------------------------------m_set-----------------------------*/
                                /*-------------------------------------top_set-------------------------*/ 
.top_set {
 width: 656px;
 height: 60px;
 right: 3px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5),
             inset 3px 8px 4px rgba(255, 255, 255, .3),
             inset 1px 2px 4px rgba(64,0,0,1),
             inset -3px -6px 4px rgba(255, 255, 255, .3),
             inset -2px -3px 2px rgba(64,0,0,1);   /*255,0,0,1*/ /* */
 background-image: url(images/g_leather.png);
 border-radius: 12px 12px 3px 3px;
 position: relative;
 text-align: center;
 line-height: 55px;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 background-color: rgba(255,255,255,1);
 font-size: 30px;
 color: rgba(100,50,0,1);
 font-weight: bold;
 text-shadow: 0px 1px 3px rgba(255,255,255,.4),
              0px -1px 1px rgba(0,0,0,.5);
}

.top_set:before, .top_set:after {
  content: '';
  position: absolute;
  top: 49px;
  left: 11px;
  right: 13px;
  height: 0px;
  border-bottom: 2px dashed rgba(255,255,255,.2);
  /*outline: 1px dashed #fff;*/
}
.top_set:before{
 top: 48px;
 border-bottom: 1px dashed rgba(0, 0, 0, .5);
 }
                             /*-------------------------------------top_set-------------------------*/
                             /*---------------------------------body_set-----------------------------*/
.body_set {

 width: auto;
 position: relative;
 height: 340px;
 overflow: auto;
 margin: 40px 18px 20px 20px;

}

/*.bottom_set:before { 
    content:"";
    position:absolute;
    height:0px;
    width:100%;
    bottom:100px;
    right:0px;
    border-width: 25px 25px 25px 25px ;
    border-style:solid;
    border-color: #fff #ccc #bbb #ddd; 
    background:#658E15; 
    display:block; 
    box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}*/
                             /*---------------------------------body_set-----------------------------*/
                            /*-------------------------------------------bottom_set---------------*/
.bottom_set {
	width: auto;
	height: 50px;
 font-family: "Segoe Print", Verdana, Geneva, sans-serif;
 font-size: 16px;
	background: rgba(0, 0, 0, 0);
}
                          /*-------------------------------------------bottom_set---------------*/
.addtext {
 float: left;
/*color: -webkit-link;*/
}

.addthis {
 float: right;
 margin-top: 6px;
}

.x {
 position: absolute;
	width: 18px;
	height: 18px;
	background-image: url(images/sprite-gray.png);
	background-position: -270px -36px;
	right: 18px;
	top: 18px;
}

.x:hover {
	background-image: url(images/sprite-colour.png);
}

.outword, .inword {
 outline-color: #3C6;
 background: rgba(255, 255, 255, 0);
 
 border-radius:7px;
 border: 0;/*1px solid rgba(204,204,204,1)*/

	height: 20px;
 width: 260px;
	font-size: 16px;
 text-align: center;
}
/*.outword{
 text-align: left;
}
.inword{
 text-align: right;
}*/
.word {
 position:relative;
 top: 10px;
	height: 22px;
	display: inline-block;
 
}
table {
border-collapse:collapse;
width:590px;
}
table, td, th {
border-top:1px solid rgba(102,153,255,.3);
/*border:1px solid #f6abca;*/


}
td{
 padding-left:30px;
 }
 
#addwords {
 position:absolute;
 z-index:101;
 width: 18px;
	height: 18px;
	background-image: url(images/sprite-gray.png);
	background-position:  -36px -0px;
 top: 65px;
 right: 18px;
}
#addwords:hover {
	background-image: url(images/sprite-colour.png);
}

::-webkit-scrollbar {
width:20px
}
::-webkit-scrollbar-thumb {
background-image:url(images/b.png), url(images/t.png);
background-position:bottom, top;
background-repeat:no-repeat;
border-radius:2px;
min-height:80px
}
::-webkit-scrollbar-thumb:hover {
background-image:url(images/hb.png), url(images/ht.png);
background-position:bottom, top;
background-repeat:no-repeat, no-repeat;
background-color:rgba(0,0,0,0)
}
::-webkit-scrollbar-track {
border-left:solid 2px rgba(255,153,153,0.6)
}
::-webkit-scrollbar-track:hover {
border-left:solid 2px #f99
}
/*---------------------------------------------------------------------------*/

#language {
	position: relative;
	bottom: 30px;
	z-index: 3;
	left: 0
}

#icon_repl, #icon_cap {
	background-image: url(images/sprite-colour.png)
}

#icon_edit {
	background-image: url(images/sprite-gray.png)
}

#upgrade, #info {
	z-index: 102;
	position: absolute;
	font-size: 20px;
	text-align: center;
	color: rgba(0,0,0,0.4);
	width: 100%;
	height: 30px;
	resize: none;
	outline: 0;
	border: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background: rgba(0,0,0,0)
}

#showinterim, #VN-log {
	z-index: 100;
	width: 100%;
	position: absolute;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background: rgba(0,0,0,0)
}

#VN-log {
	padding: 5px;
	font-size: 12px;
	text-align: left;
	color: rgba(51,204,0,0.8)
}

#showinterim {
	height: 30px;
	resize: none;
	outline: 0;
	border: 0;
	padding: 0;
	font-size: 20px;
	text-align: right;
	color: rgba(0,0,0,0.3)
}

#txtqual, .txtqual {
	height: 30px;
	width: 30px
}

/*------------------------------------*\
	$ DIV
 
\*------------------------------------*/

#left_area {
	position: fixed;
 left: 6px;
 top: 4px;
	bottom: 74px;
}

#right_area {
	position: fixed;
 right:0;

}

#footer {
	position:fixed;
	bottom:0;
	width:100%;
 height:40px;
}

#left_ftr_area {
	position:fixed;
 float:left;
}

#right_ftr_area {
	position:fixed;
 float:right;
 right:4px;
}

.text_box {
	position: relative;
	width: auto;
	height: 100%;
	padding: 10px 10px 10px 10px;
	margin: 5px auto;
	background-color: #fff;
	box-shadow: 0 0px 1px rgba(0,0,0,0.3);
}

.text_box:before {
	z-index: -1;
	position: absolute;
	content: "";
	top: 80%;
	right: auto;
	bottom: 15px;
	left: 10px;
	width: 50%;
	max-width: 300px;
	background: rgba(0,0,0,0.1);
	box-shadow: 0 15px 10px rgba(0,0,0,0.5);
	-webkit-transform: rotate(-3deg)
}

.text_box:after {
	z-index: -1;
	position: absolute;
	content: "";
	top: 10px;
	right: 15px;
	bottom: 20%;
	left: auto;
	width: 15%;
	max-width: 300px;
	background: rgba(0,0,0,0.1);
	max-height: 300px;
	box-shadow: 15px 0 10px rgba(0,0,0,0.5);
	-webkit-transform: rotate(3deg);
}

#voicenote {
	border: 0;
	position: inherit;
	resize: none;
	outline: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.3;
	color: #333;
	width: 100%;
	height: 95%;
	margin-top: 15px;
}
